/* 订单卡片样式，优化外观，包括增加圆润效果、调整阴影等 */
.order-card {
    position: relative;
    width: 720rpx;
    border: 2px solid rgba(60, 156, 255, 0.5); /* 调整边框样式和透明度 */
    background-color: #ffffff;
    margin: 8px auto;
    border-radius: 12px; /* 增加圆润效果 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 优化阴影效果 */
    overflow: hidden; /* 处理内容溢出 */
    font-family: Arial, sans-serif; /* 设置字体系列 */
}

.order-top {
    padding-top: 10rpx;
    border-bottom: 1px solid #e8e8e8; /* 添加底部边框，增强区分度 */
}

.line {
    padding: 16rpx 20rpx 20rpx 20rpx;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px; /* 增加圆润效果 */
}

.ordertype {
    margin-left: 16rpx;
    font-size: 12px;
    line-height: 24rpx;
    color: #FFFFFF;
    background-color: #00d4d4;
    border-width: 2rpx;
    border-color: #3c9cff;
    height: 32rpx;
    line-height: 32rpx;
    padding: 0 10rpx;
    text-align: center;
    border-radius: 24rpx; /* 增加圆润效果 */
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.1);
}

.ordertitle {
    margin-top: 16rpx;
    margin-left: 20rpx;
    color: #57a0ff;
    font-size: 14px;
    font-weight: 500;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); /* 添加文本阴影 */
    border-radius: 8px; /* 增加圆润效果 */
}

.orderprice {
    margin-left: 16rpx;
    font-size: 12px;
    line-height: 24rpx;
    color: #FFFFFF;
    background-color: #ff5500;
    border-width: 2rpx;
    border-color: #3c9cff;
    height: 32rpx;
    line-height: 32rpx;
    padding: 0 10rpx;
    text-align: center;
    border-radius: 24rpx; /* 增加圆润效果 */
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.1);
}

/* 订单主体 */
.userimg {
    display: inline-block;
    margin: 16rpx 0 16rpx 16rpx;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border-radius: 36rpx; /* 增加圆润效果 */
}

.ordername {
    position: absolute;
    margin-top: 52rpx;
    margin-left: 16rpx;
    font-weight: 500;
    font-size: 12px;
    color: #7d7e80;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); /* 添加文本阴影 */
    border-radius: 8px; /* 增加圆润效果 */
}

.ordercontent {
    position: absolute;
    padding-top: 8rpx;
    width: 600rpx;
    color: #7d7e80;
    font-weight: 500;
    margin-left: 16rpx;
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); /* 添加文本阴影 */
    border-radius: 8px; /* 增加圆润效果 */
}

.date {
    position: absolute;
    margin-left: 16rpx;
    color: #7d7e80;
    font-size: 12px;
    bottom: 12rpx;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); /* 添加文本阴影 */
    border-radius: 8px; /* 增加圆润效果 */
}

.orderbutton {
    position: absolute;
    right: 20rpx;
    bottom: 17rpx;
    font-size: 12px;
    line-height: 46rpx;
    color: #FFFFFF;
    background-color: #3c9cff;
    border-width: 2rpx;
    height: 46rpx;
    width: 120rpx;
    line-height: 46rpx;
    text-align: center;
    border-radius: 24rpx; /* 增加圆润效果 */
    transition: background-color 0.3s ease; /* 添加过渡效果 */
}

.orderbutton:hover {
    background-color: #2a80e0; /* 悬停时的背景色变化 */
}

.orderitem {
    position: absolute;
    margin-top: 16rpx;
    margin-left: 546rpx;
    color: #7d7e80;
    font-size: 12px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); /* 添加文本阴影 */
    border-radius: 8px; /* 增加圆润效果 */
}

.loading {
    margin-top: 40rpx;
    padding-bottom: 40rpx;
    text-align: center;
    animation: loadingAnimation 1s infinite alternate;
    border-radius: 12px; /* 增加圆润效果 */
}

@keyframes loadingAnimation {
    from {
        opacity: 0.5;
    }
    to {
        opacity: 1;
    }
}